<template>
  <div class="seek_talent_dtls">
    <div class="app_loading" v-if="!pageLoading">
      <div
        v-loading="true"
        class="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
      ></div>
    </div>
    <template v-if="pageLoading">
      <div class="result_top">
        <div class="result_top-one">
          <div>掌上精选智能匹配达人查询结果</div>
          <div class="one-btn" @click="$router.push('/inAnalysis/findTalent')">
            重新匹配
          </div>
        </div>
        <div class="result_top-two">
          <div>数据查询时间: {{ matchTalentInfo.matchTime }}</div>
          <div
            class="two-color"
            @click="$router.push('/inAnalysis/matchHistory')"
          >
            查看历史匹配记录
          </div>
        </div>
      </div>
      <div class="mate_text_box">
        <div class="mate_box">
          共匹配到<span>{{ matchTalentInfo.total }}</span
          >个达人,仅展示排名靠前的TOP5达人详情. 如需全部达人信息,请<el-popover
            placement="bottom"
            trigger="hover"
          >
            <div class="message_content">
              <div class="popper_arrow"></div>
              <img src="@/assets/img/xiaozhushou_qr.jpg" />
              <div>工作日：9:30--18:30</div>
            </div>
            <span slot="reference">联系客服</span>
          </el-popover>
        </div>
        <div class="mate_box">达人信息显示近一个月的汇总数据</div>
      </div>
      <div class="std_tabs_wrap">
        <div class="std_tabs_box">
          <div
            class="tabs_item"
            v-for="(item, index) in matchListDetail"
            :key="index"
            @click="talentRadio = '达人' + (index + 1)"
            :class="{ tabs_active: talentRadio == '达人' + (index + 1) }"
          >
            达人{{ index + 1 }}
          </div>
          <!-- <div class="tabs_item" @click="talentRadio='达人1'" :class="{'tabs_active': talentRadio=='达人1'}">达人1</div>
          <div class="tabs_item" @click="talentRadio='达人2'" :class="{'tabs_active': talentRadio=='达人2'}">达人2</div>
          <div class="tabs_item" @click="talentRadio='达人3'" :class="{'tabs_active': talentRadio=='达人3'}">达人3</div>
          <div class="tabs_item" @click="talentRadio='达人4'" :class="{'tabs_active': talentRadio=='达人4'}">达人4</div>
          <div class="tabs_item" @click="talentRadio='达人5'" :class="{'tabs_active': talentRadio=='达人5'}">达人5</div> -->
        </div>
        <!-- <div class="export_box">
          <img src="@/assets/zhao/daoc.png" alt="" />
          <span>导出</span>
        </div> -->
      </div>
      <div class="seek_talent_wrap" v-if="hasData">
        <!-- 达人信息 -->
        <div class="st_info_wrap" v-if="analysisData!=null">
          <div class="seek_talent_left">
            <div class="head_portrait" @click="toTalentDtl">
              <img :src="analysisData.logo" alt="" />
            </div>
            <div class="info_top_box">
              <div class="stl_cont">
                <div class="lc_top">TOP{{ analysisData.top }}</div>
                <div class="lc_name" @click="toTalentDtl">
                  {{ analysisData.nickName }}
                </div>
                <el-popover placement="bottom" trigger="hover">
                  <vue-qr
                    :size="100"
                    :margin="0"
                    :auto-color="true"
                    :dot-scale="1"
                    :text="analysisData.shareLink"
                  />
                  <p
                    style="
                      text-align: center;
                      font-size: 14px;
                      color: #888888;
                      margin-top: 10px;
                    "
                  >
                    查看抖音主页
                  </p>

                  <img
                    class="lc_ewm"
                    src="@/assets/wang/video/ewm.png"
                    slot="reference"
                    alt=""
                  />
                </el-popover>
                <!-- <img class="lc_ewm" src="@/assets/wang/video/ewm.png" slot="reference"  alt=""> -->
              </div>
              <div class="dy_number">抖音号:{{ analysisData.uniqueId }}</div>
              <div class="sex_age_area">
                <div class="sex_box">
                  <span>性别</span>
                  <span v-if="!analysisData.gender">--</span>
                  <img
                    v-if="analysisData.gender == 2"
                    src="@/assets/shi/girl.png"
                    alt=""
                  />
                  <img
                    v-if="analysisData.gender == 1"
                    class="img1"
                    src="@/assets/shi/boy.png"
                  />
                </div>
                <div class="age_box">
                  年龄
                  <span>{{
                    analysisData.birthday ? analysisData.birthday + "岁" : "--"
                  }}</span>
                </div>
                <div class="area_box">
                  地区
                  <span>{{
                    analysisData.province ? analysisData.province : "--"
                  }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="seek_talent_right">
            <div class="text">
              与您带货商品的匹配分高达<span>{{ analysisData.score }}</span
              >，超过<span>{{ analysisData.scoreRanking }}%</span>的达人
            </div>
            <div class="button_box">
              <div
                class="btn_item"
                @mouseover="showTell = true"
                @mouseleave="showTell = false"
              >
                联系方式<span class="jiant"></span>
                <div class="tell_box" v-if="showTell && analysisData.tel">
                  tell:{{ analysisData.tel }}
                </div>
                <div
                  class="notell_box notell_left"
                  v-if="showTell && !analysisData.tel"
                >
                  <div class="ewm_box">
                    <img src="@/assets/img/xiaozhushou_qr.jpg" alt="" />
                  </div>
                  <div class="text">
                    获取达人最新联系方式及报价，请<span>联系客服</span>
                  </div>
                </div>
              </div>
              <div
                class="btn_item"
                @mouseover="showPrice = true"
                @mouseleave="showPrice = false"
              >
                查看报价<span class="jiant"></span>
                <div
                  class="look_price"
                  v-if="showPrice && analysisData.liveQuotes.length"
                >
                  <div class="price_item">
                    <div class="title">品牌推广专场</div>
                    <div class="bottom">
                      <span>{{
                        analysisData.liveQuotes[0].brandHour
                          ? "￥" + analysisData.liveQuotes[0].brandHour + "/小时"
                          : "未开通"
                      }}</span>
                      <span>{{
                        analysisData.liveQuotes[0].brandDay
                          ? "￥" + analysisData.liveQuotes[0].brandDay + "/天"
                          : "未开通"
                      }}</span>
                    </div>
                  </div>
                  <div class="price_item">
                    <div class="title">电商带货专场</div>
                    <div class="bottom">
                      <span>{{
                        analysisData.liveQuotes[0].electricitySpecial
                          ? "￥" +
                            analysisData.liveQuotes[0].electricitySpecial +
                            "/小时"
                          : "未开通"
                      }}</span>
                      <span>{{
                        analysisData.liveQuotes[0].electricityJoin
                          ? "￥" +
                            analysisData.liveQuotes[0].electricityJoin +
                            "/商品"
                          : "未开通"
                      }}</span>
                    </div>
                  </div>
                </div>
                <div
                  class="notell_box"
                  v-if="showPrice && !analysisData.liveQuotes.length"
                >
                  <div class="ewm_box">
                    <img src="@/assets/img/xiaozhushou_qr.jpg" alt="" />
                  </div>
                  <div class="text">
                    获取达人最新联系方式及报价，请<span>联系客服</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 达人信息列表 -->
        <div class="st_data_screen" v-if="analysisData!=null">
          <div class="st_screen_item">
            <div class="screen_top">
              <div class="screen_num">
                {{ format_num(analysisData.totalFans) }}
              </div>
              <div class="screen_text">粉丝数</div>
            </div>
            <div class="screen_btm">
              <div class="screen_num">
                {{ format_num(analysisData.liveProCount) }}
              </div>
              <div class="screen_text">直播商品数</div>
            </div>
          </div>
          <div class="st_screen_item">
            <div class="screen_top">
              <div class="screen_num">{{ analysisData.avgPrice }}</div>
              <div class="screen_text">客单价</div>
            </div>
            <div class="screen_btm">
              <div class="screen_num">
                {{ format_num(analysisData.liveProVolumeCount) }}
              </div>
              <div class="screen_text">动销商品数</div>
            </div>
          </div>
          <div class="st_screen_item">
            <div class="screen_top">
              <div class="screen_num">
                {{ format_num(analysisData.liveShopCount) }}
              </div>
              <div class="screen_text">带货直播场次</div>
            </div>
            <div class="screen_btm">
              <div class="screen_num">{{ analysisData.avgLookTime }}</div>
              <div class="screen_text">平均看播时长</div>
            </div>
          </div>
          <div class="st_screen_item">
            <div class="screen_top">
              <div class="screen_num">{{ format_num(analysisData.avgLook) }}</div>
              <div class="screen_text">平均场观人数</div>
            </div>
            <div class="screen_btm">
              <div class="screen_num">{{ analysisData.avgLiveTime }}</div>
              <div class="screen_text">场均直播时长</div>
            </div>
          </div>
        </div>
        <div
          v-loading="loading01"
          v-if="loading01"
          class="info_loading"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
        ></div>
        <!-- 雷达图 -->
        <div class="st_radar_chart" v-if="!loading02">
          <div class="radar_box">
            <RadarChart v-if="yAxios.length" :yData="yAxios" :xData="xAxios" />
            <div class="no_data" v-if="!yAxios.length">
            <img src="@/assets/shi/zanwushuju.png" alt />
            <div>暂无数据</div>
          </div>
          </div>
          <div class="radar_section">
            <div class="section_text" v-if="a1!=null">
              30天千次观看成交额：分值<span>{{ a1.score }}</span
              >，同类达人平均值<span>{{ a1.averageScore }}</span
              >，超过<span>{{ a1.scoreRanking }}%</span>的同类达人
            </div>
            <div class="section_text" v-if="a2!=null">
              带货直播场次：分值<span>{{ a2.score }}</span
              >，同类达人平均值<span>{{ a2.averageScore }}</span
              >，超过<span>{{ a2.scoreRanking }}%</span>的同类达人
            </div>
            <div class="section_text" v-if="a3!=null">
              30天平均场观人数：分值<span>{{ a3.score }}</span
              >，同类达人平均值<span>{{ a3.averageScore }}</span
              >，超过<span>{{ a3.scoreRanking }}%</span>的同类达人
            </div>
            <div class="section_text" v-if="a4!=null">
              30天直播销售额：分值<span>{{ a4.score }}</span
              >，同类达人平均值<span>{{ a4.averageScore }}</span
              >，超过<span>{{ a4.scoreRanking }}%</span>的同类达人
            </div>
            <div class="section_text" v-if="a5!=null">
              平均看播时长：分值<span>{{ a5.score }}</span
              >，同类达人平均值<span>{{ a5.averageScore }}</span
              >，超过<span>{{ a5.scoreRanking }}%</span>的同类达人
            </div>
          </div>
        </div>
        <div
          v-loading="loading02"
          v-if="loading02"
          class="loading"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
          style="height: 320px"
        ></div>
        <!-- 销量TOP3商品 -->
        <div class="st_title">
          <div class="line"></div>
          <div class="text">销量TOP3商品</div>
        </div> 
        <div class="st_top3_box">
          <ul class="top3_title">
            <li>商品</li>
            <li>类目</li>
            <li>价格</li>
            <li>佣金率</li>
            <!-- <li>转化率</li> -->
            <li>销量</li>
            <li>销售额</li>
          </ul>
          <template v-if="!loading03">
            <ul
              class="top3_content"
              v-for="(item, index) in GoodsTop3List"
              :key="index"
            > 
              <li class="left_box" @click="result(item.proId)">
                <div class="img_box">
                  <img :src="item.proLogo" alt="" />
                </div>
                <div class="title_box">
                  <SourceIcon class="icon_box" :sourceid="item.fromId" />
                  {{ item.proTitle }}
                </div>
              </li>
              <li>{{ item.category }}</li>
              <li class="num-font">￥{{ item.proPrice }}</li>
              <li class="num-font">{{ item.commissionRate?(Number(item.commissionRate)*100).toFixed(1)+'%': 0 }}</li>
              <!-- <li class="num-font">{{ item.conversionRatio }}%</li> -->
              <li class="num-font">{{ item.volume }}</li>
              <li class="num-font">{{ item.amount }}</li>
            </ul>
          </template>
          <div
            v-loading="loading03"
            v-if="loading03"
            class="loading"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
            style="height: 237px"
          ></div>
          <div class="no_data" v-if="GoodsTop3List.length == 0 && !loading03">
            <img src="@/assets/shi/zanwushuju.png" alt />
            <div>暂无数据</div>
          </div>
        </div>
        <!-- 商品类目TOP3和商品品牌TOP3 -->
        <div class="st_progress_bar" v-if="fansOverview!=null">
          <div class="progress_bar_item">
            <div class="st_title">
              <div class="line"></div>
              <div class="text">商品类目TOP3</div>
            </div>
            <template v-if="!loading04">
              <div
                class="progress_bar_box"
                v-for="(item, index) in fansOverview.proCategory"
                :key="index"
              >
                <div class="bar_title">{{ item.name }}</div>
                <div class="df_ac">
                  <div class="bar_box">
                    <div
                      class="jindu"
                      :style="{ width: (item.value / goodsTOP3Total) * 100 + '%' }"
                    ></div>
                  </div>
                  <div class="num">
                    {{ ((item.value / goodsTOP3Total) * 100).toFixed(2) }}%
                  </div>
                </div>
              </div>
            </template>
            <div
              v-loading="loading04"
              v-if="loading04"
              class="loading"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
              style="height: 174px"
            ></div>
            <div class="st_no_data" v-if="!fansOverview.proCategory||!fansOverview.proCategory.length">
              <img src="@/assets/shi/zanwushuju.png" alt />
              <div>暂无数据</div>
            </div>
          </div>
          <div class="progress_bar_item bar_item2">
            <div class="st_title">
              <div class="line"></div>
              <div class="text">商品品牌TOP3</div>
            </div>
            <template v-if="!loading04">
              <div
                class="progress_bar_box"
                v-for="(item, index) in fansOverview.brand"
                :key="index"
              >
                <div class="bar_title">{{ item.name }}</div>
                <div class="df_ac">
                  <div class="bar_box">
                    <div
                      class="jindu"
                      :style="{ width: (item.value / brandTOP3Total) * 100 + '%' }"
                    ></div>
                  </div>
                  <div class="num">
                    {{ ((item.value / brandTOP3Total) * 100).toFixed(2) }}%
                  </div>
                </div>
              </div>
            </template>
            <div
              v-loading="loading04"
              v-if="loading04"
              class="loading"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
              style="height: 174px"
            ></div>
            <div class="st_no_data" v-if="fansOverview&&(!fansOverview.brand ||!fansOverview.brand.length)&&!loading04">
              <img src="@/assets/shi/zanwushuju.png" alt />
              <div>暂无数据</div>
            </div>
          </div>
        </div>
        <!-- 直播粉丝画像title和内容 -->
        <div class="st_title">
          <div class="line"></div>
          <div class="text">直播粉丝画像</div>
        </div>
        <div class="live_fans_portrait">
          <div class="lfp_item item1">
            <img class="img1" src="@/assets/shi/girlTwo.png" v-if="isMenWomen" />
            <img class="img1" src="@/assets/shi/boy.png" v-if="!isMenWomen" />
            {{ fansLiveview.gender? fansLiveview.gender:'--'}}
          </div>
          <div class="lfp_item item2">
            <img class="img2" src="@/assets/shi/AgeProportion.png" alt="" />{{
              fansLiveview.age?fansLiveview.age:'--'
            }}
          </div>
          <div class="lfp_item item3">
            <img class="img3" src="@/assets/shi/dq-pro.png" alt="" />{{
              fansLiveview.province?fansLiveview.province:'--'
            }}
          </div>
        </div>
        <!-- 直播战绩TOP10列表title和列表 -->
        <div class="st_title">
          <div class="line"></div>
          <div class="text">直播战绩TOP10</div>
          <div class="export_box" @click="exportTopList">
            <img src="@/assets/zhao/daoc.png" alt="" />
            <span>导出</span>
          </div>
        </div>
        <div class="st_live_list">
          <ul class="live_title">
            <li>开播时间</li>
            <li>直播商品数</li>
            <li>动销商品数</li>
            <li>动销比</li>
            <li class="li_5">直播时长</li>
            <li>场观人数</li>
            <li>平均在线人数</li>
            <li>人均看播时长</li>
            <li>总销量</li>
            <li>总销售额</li>
          </ul>
          <template v-if="!loading06">
            <ul
              class="live_content"
              v-for="(item, index) in GoodsTop10List"
              :key="index"
            >
              <li>{{ timestamp(item.beginTime, "Y-M-D") }}</li>
              <li>{{ format_num(item.liveProCount) }}</li>
              <li>{{ format_num(item.liveProVolumeCount) }}</li>
              <li>{{ item.proRate }}%</li>
              <li class="li_5">
                {{ format_time((item.endTime - item.beginTime) * 1000) }}
              </li>
              <li>{{ format_num(item.sumPeople) }}</li>
              <li>{{ format_num(item.avgonlinePeople) }}</li>
              <li>{{ item.avgLookTime }}</li>
              <li>{{ format_num(item.liveVolume) }}</li>
              <li>{{ format_num(item.livesales) }}</li>
            </ul>
          </template>
          <div
              v-loading="loading06"
              v-if="loading06"
              class="loading"
              element-loading-text="拼命加载中..."
              element-loading-spinner="el-icon-loading"
              style="height: 174px"
            ></div>
          <div class="no_data" v-if="(!GoodsTop10List||!GoodsTop10List.length) && !loading06">
            <img src="@/assets/shi/zanwushuju.png" alt />
            <div>暂无数据</div>
          </div>
        </div>
      </div>
      <!-- <div
        v-loading="pageLoading"
        v-if="pageLoading"
        class="page_loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      ></div> -->
      <div class="empty addTop" v-show="!hasData">
        <!-- <img src="@/assets/meng/empty.png" /> -->
        <img src="@/assets/shi/zanwushuju.png" />
        <p>抱歉,数据雷达暂未查询到符合您要求的达人,换个条件试试吧~</p>
      </div>
    </template>
    <!-- <div class="rectang_tree_wrap">
      <RectRee />
    </div> -->
  </div>
</template>

<script>
// import RectRee from "@/component/RectangularTree.vue"
import RadarChart from "@/component/RadarChart.vue";
import SourceIcon from "@/component/SourceIcon.vue";
export default {
  components: {
    RadarChart,
    SourceIcon,
    // RectRee
  },
  props: {},
  data() {
    return {
      pageLoading: false, //页面首次加载的时候显示页面loading,切换的时候显示局部loading
      showTell: false, //联系方式显示隐藏
      showPrice: false, //查看报价显示隐藏
      fansOverview: null, //{}
      fansLiveview: {}, //{}
      talentRadio: "达人1",
      hasData: false,
      matchTalentInfo: null, //{}
      matchListDetail: [],

      // 每一项的达人对象
      talentIdItem: null, //{}
      // 达人id
      talentId: "",

      //达人基本数据
      analysisData: null, //{}
      // 页面loading
      // pageLoading: false,
      //top3列表数组
      GoodsTop3List: [],
      goodsTOP3Total: 0, //商品类目top3数据总量,用来计算百分比
      brandTOP3Total: 0, //商品品牌top3数据总量,用来计算百分比
      //top10列表数组
      GoodsTop10List: [],

      // 雷达图数据
      xAxios: [],
      yAxios: [],
      a1: null, //{}
      a2: null, //{}
      a3: null, //{}
      a4: null, //{}
      a5: null, //{}

      // 自上而下一个接口对应一个loading,有的loading可能没有用到
      loading01: false,
      loading02: false,
      loading03: false,
      loading04: false,
      loading05: false,
      loading06: false,

      cancel01: null,
      cancel02: null,
      cancel03: null,
      cancel04: null,
      cancel05: null,
      cancel06: null,
    };
  },
  watch: {
    talentRadio(newval) {
      // 如果有错误说明没有匹配到达人,展示缺省图
      try {
        // 截取 '达人1' 中的最后一个数字,让它减一用来做索引
        let sy = Number(newval.charAt(newval.length - 1)) - 1;
        this.talentIdItem = this.matchListDetail[sy];
        this.talentId = this.talentIdItem.author;
        this.getTalentData();
      } catch (err) {
        console.log(err);
        this.hasData = false;
      }
    },
  },
  computed: {
    isMenWomen() {
      // return this.fansOverview.gender.indexOf("女性") != -1 ? true: false
      return true;
    },
  },
  created() {
    // 判断是进行匹配还是查看详情
    if (localStorage.getItem("mTalentHasData") == "true") {
      // 如果有错误说明没有匹配到达人,展示缺省图
      try {
        this.hasData = true;
        this.matchListDetail = JSON.parse(
          localStorage.getItem("matchListDetail")
        );
        this.matchTalentInfo = JSON.parse(
          localStorage.getItem("matchTalentInfo")
        );
        this.talentIdItem = this.matchListDetail[0];
        this.talentId = this.talentIdItem.author;
        this.talentRadio = "达人1";
        this.getTalentData();
      } catch (err) {
        console.log(err);
        this.hasData = false;
      }
    } else {
      this.hasData = false;
    }
    document.title = "智能找达人&智能分析服务平台-掌上精选";
  },
  mounted() {},
  methods: {
    getTalentData() {
      // (this.pageLoading = true),
      //   Promise.all([
          this.getSaleOfGoodsTop3();
          this.getAnalysis();
          this.getSaleOfGoodsTop10();
          this.getAuthorFansOverview();
          this.getLiveFansView();
          this.getAuthorLiveRadar();
        // ]).then(() => {
        //   this.pageLoading = false;
        // });
    },
    // 获取达人基本数据
    getAnalysis() {
      let that = this;
      // return new Promise((resolve, reject) => {
        this.loading01 = true;
        this.$axios
          .get(
            "/api/author/analysis?authorId=" +
              this.talentId +
              "&ProductToAuthorId=" +
              this.talentIdItem.productToAuthorId,
              {
                cancelToken: new that.$axios.CancelToken(function executor(c) {
                  if (that.cancel01) that.cancel01();
                  that.cancel01 = c;
              }),
          })
          .then((res) => {
            this.pageLoading = true;
            // resolve();
            if (!res.data.code) {
              this.loading01 = false;
              this.analysisData = res.data.data;
            }
          });
      // });
    },
    // 获取销量top3商品列表数据
    getSaleOfGoodsTop3() {
      let that = this;
      this.loading03 = true;
      // return new Promise((resolve, reject) => {
        this.$axios
          .post("/api/Product/SaleOfGoodsTop3", {
            authorId: this.talentId,
          },{
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel02) that.cancel02();
              that.cancel02 = c;
            }),
          })
          .then((res) => {
            // resolve();
            if (!res.data.code) {
              this.loading03 = false;
              this.GoodsTop3List = res.data.data;
            }
          });
      // });
    },
    // 获取直播战绩TOP10列表数据
    getSaleOfGoodsTop10() {
        this.loading06 = true;
      // return new Promise((resolve, reject) => {
        this.$axios
          .get("/api/author/analysislive", {
            params: {
              authorId: this.talentId,
            },
          })
          .then((res) => {
            // resolve();
            if (!res.data.code) {
              this.loading06 = false;
              this.GoodsTop10List = res.data.data;
            }
          });
      // });
    },
    // 获取商品类目和商品品牌  (百分比的柱子的数据)
    getAuthorFansOverview() {
      // return new Promise((resolve, reject) => {
        this.loading04 = true;
        this.$axios
          .post("/api/Product/GetSaleOfGoodsSurvey", {
            authorId: this.talentId,
          })
          .then((res) => {
            // resolve();
            if (res.data.code == 0) {
              this.loading04 = false;
              this.fansOverview = res.data.data;
              if (this.fansOverview) {
                let totalCategory = 0;
                let brandTotal = 0;
                this.fansOverview.proCategory.forEach((item) => {
                  // item.total =
                  //   this.fansOverview.proCategory[0].value +
                  //   this.fansOverview.proCategory[1].value +
                  //   this.fansOverview.proCategory[2].value;
                  totalCategory+=item.value;
                });
                this.goodsTOP3Total = totalCategory
                this.fansOverview.brand.forEach((item) => {
                  // item.total =
                  //   this.fansOverview.brand[0].value +
                  //   this.fansOverview.brand[1].value +
                  //   this.fansOverview.brand[2].value;
                  brandTotal+=item.value;
                });
                this.brandTOP3Total = brandTotal
              }
            }
          })
          .catch((err) => {
            console.log(err);
          });
      // });
    },
    // 获取直播粉丝画像
    getLiveFansView() {
      // return new Promise((resolve, reject) => {
        this.loading05 = true;
        this.$axios
          .post("/api/Author/GetAuthorFansOverview", {
            authorId: this.talentId,
            FansType: 2
          })
          .then((res) => {
            // resolve();
            if (res.data.code == 0) {
              this.loading05 = false;
              this.fansLiveview = res.data.data;
            }
          })
          .catch((err) => {
            console.log(err);
          });
      // });
    },
    // 获取雷达图数据
    getAuthorLiveRadar() {
      this.loading02 = true;
      // return new Promise((resolve, reject) => {
        this.$axios
          .get(
            `/api/author/GetAuthorLiveRadarData?authorId=${this.talentId}&ProductToAuthorId=${this.talentIdItem.productToAuthorId}`
          )
          .then((res) => {
            // resolve();
            if (!res.data.code) {
              this.loading02 = false;
              this.xAxios = res.data.data.x;
              this.yAxios = res.data.data.y;
              this.a1 = res.data.data.a1;
              this.a2 = res.data.data.a2;
              this.a3 = res.data.data.a3;
              this.a4 = res.data.data.a4;
              this.a5 = res.data.data.a5;
              // 如果雷达图没有数据,展示一个空的雷达图
              if(!this.xAxios.length){
                this.xAxios = [
                  {name: "30天千次观看成交额", max: 100},
                  {name: "带货直播场次", max: 100},
                  {name: "30天平均场观人数", max: 100},
                  {name: "30天直播销售额", max: 100},
                  {name: "平均看播时长", max: 100}
                ];
                this.yAxios = [0,0,0,0,0]
              }
            }
          });
      // });
    },
    // 导出底部top10列表
    exportTopList() {
      let that = this;
      let str = "";

      str = `开播时间,直播商品数,动销商品数,动销比,直播时长,场观人数,平均在线人数,人均看播时长,总销量,总销售额\n`;

      for (let i = 0; i < that.GoodsTop10List.length; i++) {
        str += `${this.timestamp(
          that.GoodsTop10List[i].beginTime,
          "Y-M-D"
        )},${this.format_num(
          that.GoodsTop10List[i].liveProCount
        )},${this.format_num(that.GoodsTop10List[i].liveProVolumeCount)},${
          that.GoodsTop10List[i].proRate + "%"
        },${that.format_time(
          (that.GoodsTop10List[i].endTime - that.GoodsTop10List[i].beginTime) *
            1000
        )},${that.format_num(
          that.GoodsTop10List[i].sumPeople
        )},${that.format_num(that.GoodsTop10List[i].avgonlinePeople)},${
          that.GoodsTop10List[i].avgLookTime
        },${that.format_num(
          that.GoodsTop10List[i].liveVolume
        )},${that.format_num(that.GoodsTop10List[i].livesales)}\n`;
      }
      var blob = new Blob([str], { type: "text/plain;charset=utf-8" }); //解决中文乱码问题
      blob = new Blob([String.fromCharCode(0xfeff), blob], { type: blob.type });
      let object_url = window.URL.createObjectURL(blob);
      var link = document.createElement("a");
      link.href = object_url;
      let str_name = "";
      str_name = `《直播战绩TOP10-${this.timestamp(
        new Date().getTime() / 1000,
        "Y年M月D日"
      )}》.csv`;
      link.download = str_name;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    toTalentDtl() {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${this.analysisData.authorId}/0`,
      });
      window.open(router.href, "_blank");
    },
    result(id) {
      let router = this.$router.resolve({
        path: `/talent_main/shop_main/${id}/0`,
      });
      window.open(router.href, "_blank");
    },
  },
};
</script>

<style scoped lang="less">
.app_loading{
  height: 100vh;
}
.seek_talent_dtls {
  min-height: 88.5vh;
  .result_top {
    margin-top: 14px;
    padding: 0 22px;
    border-radius: 4px;
    background-color: #fff;
    .result_top-one {
      height: 64px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 18px;
      font-weight: 600;
      color: #222222;
      .one-btn {
        width: 88px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;
        color: #fff;
        background-color: #fd7f2c;
        cursor: pointer;
      }
    }
    .result_top-two {
      height: 34px;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      // font-weight: 500;
      color: #888888;
      .two-color {
        color: #fd7f2c;
        cursor: pointer;
      }
    }
  }
  .mate_text_box {
    display: flex;
    justify-content: space-between;
    .mate_box {
      font-size: 14px;
      color: #888888;
      margin-top: 14px;
      span {
        color: #fd7f2c;
        cursor: pointer;
      }
    }
  }
  .std_tabs_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .std_tabs_box {
      display: flex;
      margin-top: 13px;
      .tabs_item {
        width: 79px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 4px;
        margin-right: 10px;
        color: #555555;
        background-color: #fff;
        cursor: pointer;
      }
      .tabs_active {
        background-color: #fd7f2c;
        color: #fff;
      }
    }
    .export_box {
      width: 64px;
      height: 32px;
      color: #67ac5b;
      font-size: 14px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
      border: solid 1px #67ac5b;
      box-sizing: border-box;
      cursor: pointer;
      img {
        width: 14px;
        height: 14px;
        margin-right: 4px;
      }
    }
  }
  .seek_talent_wrap {
    width: 100%;
    margin-top: 14px;
    padding: 20px;
    box-sizing: border-box;
    background-color: #fff;
    position: relative;
  }
  .st_info_wrap {
    display: flex;
    justify-content: space-between;
  }
  .seek_talent_left {
    display: flex;

    .head_portrait {
      width: 76px;
      height: 75px;
      border-radius: 50%;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .info_top_box {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 13px;
    }
    .stl_cont {
      display: flex;
      align-items: center;
      .lc_top {
        width: 42px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 12px;
        color: #fd7f2c;
        border-radius: 4px;
        border: solid 1px #fd7f2c;
        box-sizing: border-box;
      }
      .lc_name {
        font-size: 16px;
        color: #222222;
        font-weight: 600;
        margin: 0 6px;
        cursor: pointer;
      }
      .lc_name:hover {
        color: #fd7f2c;
      }
      .lc_ewm {
        width: 30px;
        height: 30px;
        cursor: pointer;
      }
    }
    .dy_number {
      font-size: 13px;
      color: #555555;
    }
    .sex_age_area {
      display: flex;
      font-size: 13px;
      color: #888888;
      .sex_box {
        padding-right: 14px;
        display: flex;
        align-items: center;
        span {
          margin-right: 10px;
        }
        img {
          width: 13px;
          height: 14px;
        }
      }
      .age_box {
        padding: 0 14px;
        border-left: 1px solid #e5e5e5;
        border-right: 1px solid #e5e5e5;
        span {
          margin-left: 6px;
          color: #222222;
        }
      }
      .area_box {
        padding-left: 14px;
        span {
          margin-left: 6px;
          color: #222222;
        }
      }
    }
  }
  .seek_talent_right {
    padding: 6px 0px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .text {
      font-size: 13px;
      color: #555555;
      span {
        color: #fd7f2c;
      }
    }
    .button_box {
      display: flex;
      justify-content: flex-end;
      .btn_item {
        width: 100px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        border-radius: 4px;
        font-size: 14px;
        color: #fd7f2c;
        border: solid 1px #fd7f2c;
        box-sizing: border-box;
        cursor: pointer;
        position: relative;
        .tell_box {
          position: absolute;
          top: 40px;
          left: 0;
          width: 140px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          background-color: #ffffff;
          box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1);
          border-radius: 4px;
          font-size: 13px;
          color: #222222;
        }
        .notell_box {
          position: absolute;
          top: 40px;
          right: 0;
          width: 300px;
          height: 200px;
          background-color: #ffffff;
          box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          padding: 33px 27px 35px 26px;
          box-sizing: border-box;
          .ewm_box {
            width: 100px;
            height: 100px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .text {
            font-size: 13px;
            color: #888888;
            span {
              color: #ed8642;
            }
          }
        }
        .notell_left {
          left: 0;
        }
        .look_price {
          position: absolute;
          top: 40px;
          right: 0;
          width: 300px;
          height: 172px;
          line-height: 16px;
          background-color: #ffffff;
          box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1);
          border-radius: 4px;
          padding: 0 20px;
          box-sizing: border-box;
        }
        .price_item {
          text-align: left;
          margin-top: 20px;
          padding-bottom: 20px;
          box-sizing: border-box;
          .title {
            font-weight: 600;
            font-size: 14px;
            color: #222222;
          }
          .bottom {
            font-size: 13px;
            margin-top: 14px;
            color: #555555;
            span:last-child {
              margin-left: 40px;
            }
          }
        }
        .price_item:first-child {
          border-bottom: 1px solid #efefef;
        }
        .jiant {
          display: inline-block;
          width: 0;
          height: 0;
          border-top: 5px solid transparent;
          border-left: 8px solid #fd7f2c;
          border-bottom: 5px solid transparent;
          margin-left: 5px;
        }
      }
      .btn_item:first-child {
        margin-right: 20px;
      }
    }
  }
  .st_data_screen {
    display: flex;
    margin-top: 44px;
    padding: 0 50px 40px;
    box-sizing: border-box;
    border-bottom: 1px #e5e5e5 dashed;
  }
  .info_loading{
    height: 300px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    opacity: .7;
  }
  .st_screen_item {
    width: 25%;
    text-align: center;
    .screen_btm {
      margin-top: 27px;
    }
    .screen_num {
      font-size: 24px;
      font-family: DINAlternate-Bold;
      color: #222222;
    }
    .screen_text {
      font-size: 12px;
      color: #888888;
    }
  }
  .st_radar_chart {
    display: flex;
    align-items: center;
    .radar_box {
      width: 576px;
      height: 320px;
      // padding: 40px 76px;
      box-sizing: border-box;
    }
    .radar_section {
      .section_text {
        padding: 13px 0;
        border-bottom: 1px #e5e5e5 dashed;
        font-size: 14px;
        color: #888888;
        span {
          color: #f18b6a;
        }
      }
    }
  }
  .st_top3_box {
    margin-top: 14px;
    margin-bottom: 41px;
  }
  .top3_title {
    width: 100%;
    height: 48px;
    line-height: 48px;
    display: flex;
    background-color: #f5f9ff;
    li {
      width: 14%;
      font-size: 14px;
      text-align: center;
      color: #555555;
      font-weight: 600;
    }
    li:first-child {
      width: 33%;
      padding-left: 52px;
      text-align: left;
      box-sizing: border-box;
    }
  }
  .top3_content {
    width: 100%;
    height: 78px;
    display: flex;
    border-bottom: 1px solid #e5e5e5;
    li {
      width: 14%;
      font-size: 14px;
      text-align: center;
      color: #222;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    li:first-child {
      width: 33%;
      font-size: 16px;
      padding-left: 26px;
      box-sizing: border-box;
      font-weight: 600;
    }
    .left_box {
      display: flex;
      align-items: center;
      .img_box {
        width: 50px;
        height: 50px;
        background-color: #fd7f2c;
        border-radius: 10px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 10px;
        }
      }
      .title_box {
        width: 277px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-left: 14px;
        text-align: left;
        cursor: pointer;
        .icon_box {
          display: inline-block !important;
          vertical-align: bottom;
          width: 18px;
          height: 18px;
        }
        img {
          width: 18px;
          height: 18px;
        }
      }
      .title_box:hover {
        color: #fd7f2c;
      }
    }
  }
  .st_progress_bar {
    display: flex;
    .progress_bar_item {
      width: 50%;
      margin-bottom: 40px;
    }
    // .bar_item2{
    //   margin-left: 116px;
    // }
  }
  .progress_bar_box {
    margin-top: 20px;
    .bar_title {
      font-size: 14px;
      color: #555555;
    }
    .bar_box {
      position: relative;
      width: 421px;
      height: 8px;
      background-color: #f5f5f5;
      border-radius: 20px;
      .jindu {
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 20px;
        background-color: #e39260;
      }
    }
    .num {
      margin-left: 13px;
      font-size: 14px;
      color: #888888;
    }
  }
  .live_fans_portrait {
    display: flex;
    margin: 30px 0 40px;
    .lfp_item {
      font-size: 14px;
      color: #222222;
      padding-right: 101px;
      padding-left: 50px;
      border-right: 1px solid #efefef;
      box-sizing: border-box;
      .img1 {
        width: 22px;
        height: 24px;
        margin-right: 12px;
      }
      .img2 {
        width: 23px;
        height: 24px;
        margin-right: 12px;
      }
      .img3 {
        width: 20px;
        height: 24px;
        margin-right: 12px;
      }
    }
    .item1 {
      padding-left: 0;
    }
    .item3 {
      border: none;
    }
  }
  .st_live_list {
    margin-top: 14px;
  }
  .live_title {
    width: 100%;
    height: 48px;
    line-height: 48px;
    display: flex;
    background-color: #f5f9ff;
    padding-left: 20px;
    box-sizing: border-box;
    li {
      width: 10%;
      font-size: 14px;
      text-align: center;
      color: #555555;
      font-weight: 600;
    }
    .li_5 {
      width: 11.5%;
    }
  }
  .live_content {
    width: 100%;
    height: 54px;
    display: flex;
    border-bottom: 1px solid #e5e5e5;
    padding-left: 20px;
    box-sizing: border-box;
    li {
      width: 10%;
      font-size: 14px;
      line-height: 54px;
      text-align: center;
      font-family: DINAlternate-Bold;
    }
    .li_5 {
      width: 11.5%;
    }
  }
  .page_loading {
    margin-top: 50px;
  }
}
.st_title {
  display: flex;
  align-items: center;
  position: relative;
  .line {
    width: 4px;
    height: 16px;
    background-color: #fd7f2c;
    border-radius: 2px;
    margin-right: 4px;
  }
  .text {
    font-size: 16px;
    color: #222222;
    font-weight: 600;
  }
  .export_box {
    width: 64px;
    height: 32px;
    position: absolute;
    right: 0;
    bottom: 0px;
    color: #67ac5b;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    border: solid 1px #67ac5b;
    box-sizing: border-box;
    cursor: pointer;
    img {
      width: 14px;
      height: 14px;
      margin-right: 4px;
    }
  }
  .rectang_tree_wrap {
    width: 1200px;
    height: 500px;
  }
}
.no_data {
  height: 300px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #b5b5b5;
}
.st_no_data {
  height: 180px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #b5b5b5;
  padding-top: 55px;
  box-sizing: border-box;
}
// 联系客服
.message_content img {
  width: 120px;
  height: 120px;
  margin-bottom: 6px;
}
.message_content {
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 12px;
  letter-spacing: 0px;
  text-align: center;
}
.num-font {
  font-family: DINAlternate-Bold;
}
.df_ac {
  display: flex;
  align-items: center;
}
</style>
